<!doctype html>
<html lang="en">

<head>
    <title>首页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <link rel="stylesheet" type="text/css" href="css/ui.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/SysBase.js"></script>
    <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
    <script src="js/TouchSlide.1.1.source.js"></script>
</head>

<body>
    <!--以下部分是主要内容-->
    <div id="main">
        <div class="nav hd" id="nav">
            <ul class="line" style="width: 200%;">
                <li class="on"><a href="###">头条</a></li>
                <li><a href="###">热点</a></li>
                <li><a href="###">排行</a></li>
                <li><a href="###">兴趣</a></li>
                <li><a href="###">微商</a></li>
                <li><a href="###">更多</a></li>
                <li><a href="###">体育</a></li>
                <li><a href="###">财经</a></li>
            </ul>
        </div>
        <script src="js/iscroll-probe.js"></script>
        <script type="text/javascript">
        $(function() {
            /*导航条滑动初始化*/
            var n = $('.line li').size();

            $('.line').width($('.line li:first').outerWidth(true) * n)

            $('#nav .line a').bind('tap', function(e) {
                $('#nav').find('.on').removeClass('on');
                $(this).parent().addClass('on');
            });

            new IScroll('#nav', {
                tap: true,
                scrollX: true,
                scrollY: false,
                preventDefaultException: {
                    tagName: /^(A)$/
                }
            });
        });
        </script>
        <div class="content-bd">
            <div class="tag">
                <div class="content clearfix" style="height: 100%;position: relative;overflow: hidden;">
                    <div class="content-scroller">
                        <div id="pullDown">
                            <span class="pullDownLabel">下拉刷新</span>
                        </div>
                        <!-----------------------头条-------------------------->
                        <div class="banner_slides" id="banner_slides">
                            <ul class="banner_slideContainer">
                                <li>
                                    <a href="#"><img src="img/banner01.jpg" width="100%" height="auto" /> </a>
                                </li>
                                <li>
                                    <a href="#"><img src="img/banner02.jpg" width="100%" height="auto" /> </a>
                                </li>
                                <li>
                                    <a href="#"><img src="img/banner03.jpg" width="100%" height="auto" /> </a>
                                </li>
                                <li>
                                    <a href="#"><img src="img/banner04.jpg" width="100%" height="auto" /> </a>
                                </li>
                            </ul>
                            <div class="bannerSlide_foncus"> </div>
                        </div>
                        <div class="p1-list">
                            <div class="p1 clearfix">
                                <div class="p1_con">
                                    <a href="wzxq.html">
                                        <div class="p1_conl"><img src="img/sl.jpg" width="180" height="120" /></div>
                                        <div class="p1_conr">
                                            <h1>不用读稿，我问你答！</h1>
                                            <p>当一位代表刚准备"照本宣科"时，李克强还提醒道："为了节省一点时间，不用念稿子，我问你回答"。</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="p2 clearfix">
                                <div class="p2_con">
                                    <a href="" #>
                                        <h1>捷豹XF三分钟跨越伦敦大河 华丽上演钢丝秀</h1>
                                    </a>
                                    <ul>
                                        <li style="margin-right:5px;"><img src="img/sl.jpg" width="180" height="120" /></li>
                                        <li style="margin-right:5px;"><img src="img/sl.jpg" width="180" height="120" /></li>
                                        <li><img src="img/sl.jpg" width="180" height="120" /></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="p1 clearfix">
                                <div class="p1_con">
                                    <a href="#">
                                        <div class="p1_conl"><img src="img/sl.jpg" width="180" height="120" /></div>
                                        <div class="p1_conr">
                                            <h1>不用读稿，我问你答！</h1>
                                            <p>当一位代表刚准备"照本宣科"时，李克强还提醒道："为了节省一点时间，不用念稿子，我问你回答"。</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="p1 clearfix">
                                <div class="p1_con">
                                    <a href="#">
                                        <div class="p1_conl"><img src="img/sl.jpg" width="180" height="120" /></div>
                                        <div class="p1_conr">
                                            <h1>不用读稿，我问你答！</h1>
                                            <p>当一位代表刚准备"照本宣科"时，李克强还提醒道："为了节省一点时间，不用念稿子，我问你回答"。</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="p1 clearfix">
                                <div class="p1_con">
                                    <a href="#">
                                        <div class="p1_conl"><img src="img/sl.jpg" width="180" height="120" /></div>
                                        <div class="p1_conr">
                                            <h1>不用读稿，我问你答！</h1>
                                            <p>当一位代表刚准备"照本宣科"时，李克强还提醒道："为了节省一点时间，不用念稿子，我问你回答"。</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="p1 clearfix">
                                <div class="p1_con">
                                    <a href="#">
                                        <div class="p1_conl"><img src="img/sl.jpg" width="180" height="120" /></div>
                                        <div class="p1_conr">
                                            <h1>不用读稿，我问你答！</h1>
                                            <p>当一位代表刚准备"照本宣科"时，李克强还提醒道："为了节省一点时间，不用念稿子，我问你回答"。</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div id="pullUp">
                            <i class="pullUpIcon"></i>
                            <span class="pullUpLabel">上拉显示更多</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tag">
                <ul>
                    <div class="content clearfix" style="height: 400px;position: relative;overflow: hidden;">
                        2
                    </div>
                </ul>
            </div>
            <div class="tag">
                <ul>
                    <div class="content clearfix" style="height: 100%;position: relative;overflow: hidden;">
                        3
                    </div>
                </ul>
            </div>
            <div class="tag">
                <ul>
                    <div class="content clearfix" style="height: 100%;position: relative;overflow: hidden;">
                        4
                    </div>
                </ul>
            </div>
            <div class="tag">
                <ul>
                    <div class="content clearfix" style="height: 100%;position: relative;overflow: hidden;">
                        微商
                    </div>
                </ul>
            </div>
            <div class="tag">
                <ul>
                    <div class="content clearfix" style="height: 100%;position: relative;overflow: hidden;">
                        更多
                    </div>
                </ul>
            </div>
            <div class="tag">
                <ul>
                    <div class="content clearfix" style="height: 100%;position: relative;overflow: hidden;">
                        体育
                    </div>
                </ul>
            </div>
            <div class="tag">
                <ul>
                    <div class="content clearfix" style="height: 100%;position: relative;overflow: hidden;">
                        财经
                    </div>
                </ul>
            </div>
        </div>
    </div>
    <!--以上部分是主要内容-->
    <!--以下部分是底部footer-->
    <footer class="flexbox footer">
        <!--没有fonticon可以用。 单独写 方便做active-->
        <a href="index.html" target="_self" class="flexbox-item nth1 active"><i></i><span>首页</span></a>
        <a href="chuangye.html" target="_self" class="flexbox-item nth2"><i></i><span>创业帮</span></a>
        <a href="dream.html" target="_self" class="flexbox-item nth3"><i></i><span>梦工厂</span></a>
        <a href="admin.html" target="_self" class="flexbox-item nth4"><i></i><span>我的</span></a>
    </footer>
    <!--以上部分是底部footer-->
</body>
<script type="text/javascript">
TouchSlide({
    slideCell: "#main",
    mainCell: '.content-bd'
});
$('.content').height($('.content-bd').height());
var myScroll;
var pullDownEl, pullDownL;
var pullUpEl, pullUpL;
var pullUpOffset, pullDownOffset;
var Downcount = 0,
    Upcount = 0;
var loadingStep = 0; //加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
function pullDownAction() { //下拉事件
        setTimeout(function() {
            pullDownEl.removeClass('loading');
            pullDownL.html('下拉显示更多');
            pullDownEl['class'] = pullDownEl.attr('class');
            pullDownEl.attr('class', '').hide();
            myScroll.refresh();
            loadingStep = 0;
        }, 1000); //1秒
    }
    // 上拉刷新执行的回调
function pullUpAction() {
    setTimeout(function() {
        // 模拟填充数据
        $('.p1:lt(3)').clone().appendTo('.p1-list');

        pullUpEl.removeClass('loading');
        pullUpL.html('上拉显示更多');
        pullUpEl['class'] = pullUpEl.attr('class');
        myScroll.refresh();
        loadingStep = 0;
    }, 2000);
}

function loaded() {
    pullDownEl = $('#pullDown');
    pullDownL = pullDownEl.find('.pullDownLabel');
    pullDownEl['class'] = pullDownEl.attr('class');
    pullDownEl.attr('class', '').hide();

    pullUpEl = $('#pullUp');
    pullUpL = pullUpEl.find('.pullUpLabel');
    pullUpEl['class'] = pullUpEl.attr('class');
    pullUpEl.attr('class', '');
    pullUpOffset = pullUpEl[0].offsetHeight;

    myScroll = new IScroll('.content', {
        probeType: 2, //probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。
        bounce: true, //边界反弹  
        interactiveScrollbars: true, //滚动条可以拖动  
        shrinkScrollbars: 'scale', // 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.  
        click: true, // 允许点击事件  
        keyBindings: true, //允许使用按键控制  
        momentum: true // 允许有惯性滑动
    });
    //滚动时
    myScroll.on('scroll', function(e) {
        if (loadingStep == 0 && !pullDownEl.attr('class').match('flip|loading') && !pullUpEl.attr('class').match('flip|loading')) {
            if (this.y > 5 && !pullDownEl.hasClass('flip')) {
                pullDownEl.attr('class', 'flip');
                pullDownEl.find('.pullDownLabel')[0].innerHTML = '松手开始更新';
                this.minScrollY = 0;
            } else if (this.y < 5 && pullDownEl.hasClass('flip')) {
                pullDownEl.atrr('class', '');
                pullDownEl.find('.pullDownLabel').innerHTML = '下拉刷新';
                this.minScrollY = -pullDownOffset;
            } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.hasClass('flip')) {
                pullUpEl.attr('class', 'flip');
                pullUpEl.find('.pullUpLabel')[0].innerHTML = '松手开始更新';
                this.maxScrollY = this.maxScrollY;
                loadingStep = 1;
            } else if (this.y > (this.maxScrollY + 5) && pullUpEl.hasClass('flip')) {
                pullUpEl.attr('class', '');
                pullUpEl.find('.pullUpLabel')[0].innerHTML = '上拉加载更多';
                this.maxScrollY = pullUpOffset;
            }
        }
    });
    //滚动完毕
    myScroll.on('scrollEnd', function() {
        if (loadingStep == 1) {
            if (pullUpEl.attr('class').match('flip|loading')) {
                pullUpEl.removeClass('flip').addClass('loading');
                pullUpL.html('加载中...');
                loadingStep = 2;
                pullUpAction();

            } else if (pullDownEl.attr('class').match('flip|loading')) {
                pullDownEl.removeClass('flip').addClass('loading');
                pullDownL.html('加载中...');
                loadingStep = 2;
                pullDownAction();
            }
        }
    });
}

loaded();

$(function() {
    window.setTimeout(function() {
        TouchSlide({
            slideCell: "#banner_slides",
            titCell: '.bannerSlide_foncus',
            mainCell: '.banner_slideContainer',
            autoPage: '<span></span>',
            effect: 'leftLoop',
            delayTime: 600,
            interTime: 5000,
            autoPlay: true,
            titOnClassName: 'active'
            // ,
            // endFun: function(obj) {
            //     Sys.UI.SubmitButLoading.show();
            //     window.setTimeout(function() {
            //         Sys.UI.SubmitButLoading.hide();
            //     }, 3000);
            // }
        });
    }, 10000)

})
</script>

</html>
